<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码验证器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            display: none;
        }
        .valid {
            background-color: #dff0d8;
            color: #3c763d;
            border: 1px solid #d6e9c6;
        }
        .invalid {
            background-color: #f2dede;
            color: #a94442;
            border: 1px solid #ebccd1;
        }
        .strength-meter {
            height: 10px;
            background-color: #eee;
            margin-top: 10px;
            border-radius: 5px;
            overflow: hidden;
        }
        .strength-meter-fill {
            height: 100%;
            width: 0%;
            transition: width 0.3s, background-color 0.3s;
        }
        
        /* 密码输入框容器样式 */
        .password-input-container {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        /* 密码输入框样式 */
        .password-input-container input {
            padding-right: 40px;
        }
        
        /* 切换密码按钮样式 */
        .toggle-password {
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: #777;
            margin-top: 0;
        }
        
        .toggle-password:hover {
            color: #333;
        }
        
        /* 失败原因样式 */
        .reasons {
            margin-top: 10px;
            font-size: 14px;
        }
        
        .reasons ul {
            margin: 5px 0 0 0;
            padding-left: 20px;
        }
        
        .reasons li {
            margin-bottom: 5px;
            color: #a94442;
        }
        
        .reason-category {
            margin-top: 10px;
            padding: 8px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }
        
        .reason-category strong {
            display: block;
            margin-bottom: 5px;
            color: #8a1f11;
        }
        
        .suggestion {
            margin-top: 10px;
            font-weight: bold;
            color: #3c763d;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>密码验证器</h1>
        <form id="passwordForm">
            <div class="form-group">
                <label for="username">用户名（可选）</label>
                <input type="text" id="username" placeholder="输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <div class="password-input-container">
                    <input type="password" id="password" placeholder="输入密码" autocomplete="new-password">
                    <button type="button" id="togglePassword" class="toggle-password" aria-label="显示密码">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                        </svg>
                    </button>
                </div>
                <div class="strength-meter">
                    <div class="strength-meter-fill" id="strengthMeter"></div>
                </div>
            </div>
            <button type="button" id="validateBtn">验证密码</button>
            <button type="button" id="suggestBtn">获取建议密码</button>
        </form>
        <div id="result" class="result"></div>
    </div>

    <script type="module" src="./dist/app.js"></script>
    <script>
        // 全局错误处理
        window.addEventListener('error', function(e) {
            const resultDiv = document.getElementById('result');
            if (resultDiv) {
                resultDiv.style.display = 'block';
                resultDiv.className = 'result invalid';
                resultDiv.innerHTML = '<strong>发生错误: </strong>' + e.message;
            }
            console.error(e);
        });

        // 密码可见性切换
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            const eyeIcon = togglePassword.querySelector('svg');
            
            togglePassword.addEventListener('click', function() {
                const isPassword = passwordInput.type === 'password';
                passwordInput.type = isPassword ? 'text' : 'password';
                togglePassword.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');
                
                // 切换图标
                if (isPassword) {
                    eyeIcon.innerHTML = `
                        <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486z"/>
                        <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                        <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/>
                    `;
                } else {
                    eyeIcon.innerHTML = `
                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                    `;
                }
            });
        });
    </script>
</body>
</html>
